 .main-header .navbar {
   background-color: #fff
 }

 .main-header .navbar .nav>li>a {
   color: #676a6c
 }

 .main-header .navbar .nav>li>a:hover,
 .main-header .navbar .nav>li>a:active,
 .main-header .navbar .nav>li>a:focus,
 .main-header .navbar .nav .open>a,
 .main-header .navbar .nav .open>a:hover,
 .main-header .navbar .nav .open>a:focus,
 .main-header .navbar .nav>.active>a {
   background: rgba(0, 0, 0, 0.1);
   color: #f6f6f6
 }

 .main-header .navbar .sidebar-toggle {
   border-color: #1ab394;
   background-color: #222d32
 }

 .main-header .navbar .sidebar-toggle:hover {
   color: #2a3337;
   background-color: #1a2226;
 }

 .main-header .navbar .sidebar-toggle {
   color: #fff
 }

 .main-header .navbar .sidebar-toggle:hover {
   background-color: rgba(84, 92, 96, 0.38)
 }

 @media (max-width:767px) {
   .main-header .navbar .dropdown-menu li.divider {
     background-color: rgba(255, 255, 255, 0.1)
   }
   .main-header .navbar .dropdown-menu li a {
     color: #fff
   }
   .main-header .navbar .dropdown-menu li a:hover {
     background: #367fa9
   }
 }

 .main-header .logo {
   background-color: #2a3337;
   color: #fff;
   border-bottom: 0 solid transparent
 }

 .main-header .logo:hover {
   background-color: #2a3337
 }

 .main-header li.user-header {
   background-color: rgb(30, 40, 44);
 }

 .content-header {
   background: transparent
 }

 .wrapper,
 .main-sidebar,
 .left-side {
   background-color: #222d32
 }

 .user-panel>.info,
 .user-panel>.info>a {
   color: #fff
 }

 .sidebar-menu>li.header {
   color: #4b646f;
   background: #1a2226
 }

 .sidebar-menu>li>a {
   border-left: 3px solid transparent
 }

 .sidebar-menu>li:hover>a,
 .sidebar-menu>li.active>a {
   color: #fff;
   background: #1e282c;
   border-left-color: #3c8dbc
 }

 .sidebar-menu>li>.treeview-menu {
   margin: 0 1px;
   background: #2c3b41
 }

 .sidebar a {
   color: #b8c7ce
 }

 .sidebar a:hover {
   text-decoration: none
 }

 .treeview-menu>li>a {
   color: #8aa4af
 }

 .treeview-menu>li.active>a,
 .treeview-menu>li>a:hover {
   color: #fff
 }

 .sidebar-form {
   border-radius: 3px;
   border: 1px solid #374850;
   margin: 10px 10px
 }

 .sidebar-form input[type="text"],
 .sidebar-form .btn {
   box-shadow: none;
   background-color: #374850;
   border: 1px solid transparent;
   height: 35px
 }

 .sidebar-form input[type="text"] {
   color: #666;
   border-top-left-radius: 2px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 2px
 }

 .sidebar-form input[type="text"]:focus,
 .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
   background-color: #fff;
   color: #666
 }

 .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
   border-left-color: #fff
 }

 .sidebar-form .btn {
   color: #999;
   border-top-left-radius: 0;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 0
 }

 .layout-top-nav .main-header>.logo {
   background-color: #3c8dbc;
   color: #fff;
   border-bottom: 0 solid transparent
 }

 .layout-top-nav .main-header>.logo:hover {
   background-color: #3b8ab8
 }

 #welcome {
   margin-right: 20px;
   padding-top: 15px
 }

 #header-search-field {
   padding-top: 17px;
   vertical-align: center;
   border: none;
   width: 300px;
   outline: none
 }

 .box.box-info {
   border-top-color: #d2d6de;
 }

 .input-search {
   width: 100%
 }

 .input-coursor {
   cursor: pointer
 }

 .img-circle {
   cursor: pointer
 }

 .alert-success {
   border: 0px;
   color: #3c763d;
 }

 .alert-danger {
   border: 0px;
   color: #a94442;
 }

 .answer {
   margin: 15px;
   font-size: 20px;
 }

 .right-answer {
   height: 150px;
   background-color: #f5f5f5;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
   margin-bottom: 20px;
   padding: 19px;
   min-height: 20px;
 }

 .form-control {
   border-radius: 3px;
   box-shadow: none;
   border-color: #d2d6de;
 }

 .full-height {
   height: 100% !important;
 }

 .main-container {
   height: 100%;
 }

 .exam-container {
   height: 100%;
   background: url("img/login_bac.jpg") no-repeat;
 }

 .exam-container .exam-header {
   height: 82px;
   line-height: 82px;
   font-weight: bold;
   color: #666666;
   font-size: 32px;
   text-align: center;
 }

 .float-left {
   float: left;
 }

 .exam-question {
   overflow-y: auto;
   height: calc(100% - 82px);
   padding-bottom: 20px;
 }

 .exam-question-left {
   width: 65%;
   margin-left: 5%;
 }

 .exam-question-right {
   width: 20%;
   background: white;
   margin-left: 5%;
 }

 .exam-question-title {
   min-height: 100px;
   height: auto;
   padding: 20px;
   margin-bottom: 20px;
   background-color: #26bfff;
 }

 .exam-question-answer {
   min-height: 440px;
   height: auto;
   padding: 20px;
   height: auto;
   background: white;
   position: relative;
 }

 .exam-user {
   padding: 20px;
   position: relative;
 }

 .exam-user:after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 20px;
   right: 20px;
   border-bottom: 1px solid #eee;
 }

 .exam-user div {
   height: 34px;
   line-height: 34px;
 }

 .exam-time {
   padding: 20px;
   position: relative;
 }

 .exam-time div {
   height: 34px;
   line-height: 34px;
 }

 .exam-time:after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 20px;
   right: 20px;
   border-bottom: 1px solid #eee;
 }

 .exam-blood {
   padding: 20px;
 }

 .exam-blood-line {
   height: 338px;
   overflow: hidden;
   position: relative;
 }

 .blood-outer {
   height: 100%;
   width: 20px;
   overflow: hidden;
   background-color: #f5f5f5;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
   position: relative;
   display: inline-block;
   left: 50%;
   margin-left: -10px;
 }

 .blood-inner {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
 }

 .single-select-item {
   height: 34px;
   line-height: 34px;
   padding-left: 40px;
 }
 .next-question {
   width: 70px;
   padding: 3px 10px;
   border-radius: 5px;
   text-align: center;
   bottom: 20px;
   right: 20px;
   position: absolute;
 }

 .question-answer-image {
   position: absolute;
   top: 40px;
   left: 50%;
   margin-left: -150px;
   height: 300px;
   width: 300px;
 }

 .exam-input {
   border-left: none;
   border-right: none;
   border-top: none;
   border-bottom: 1px solid #ddd;
   width: 200px;
 }

 .exam-input:focus {
   outline: none;
 }

 .separate-input {
   position: relative;
   top: 7px;
   font-size: 22px;
 }

 .font-red {
   color: red;
 }

 .hidden {
   display: none !important;
 }

 .visibility-hidden {
   visibility: hidden !important;
 }

 .circle-middle {
   vertical-align: middle;
 }

 .spinner {
   position: relative;
   display: inline-block;
   width: 28px;
   height: 28px;
   /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
   /*--paper-spinner-container-rotation-duration: 1568ms;*/
   /* ARCTIME */
   /*--paper-spinner-expand-contract-duration: 1333ms;*/
   /* 4 * ARCTIME */
   /*--paper-spinner-full-cycle-duration: 5332ms;*/
   /* SHRINK_TIME */
   /*--paper-spinner-cooldown-duration: 400ms;*/
 }

 .spinner.refresh {
   position: absolute !important;
   top: 0;
   background: transparent;
   top: 9px;
   left: 50%;
   margin-left: -10px;
 }

 .spinner .left {
   float: left;
 }

 .spinner .right {
   float: right;
 }

 .spinner {
   /* The spinner does not have any contents that would have to be
    * flipped if the direction changes. Always use ltr so that the
    * style works out correctly in both cases. */
   direction: ltr;
 }

 .spinner.active {
   -webkit-animation: container-rotate 1568ms linear infinite;
   animation: container-rotate 1568ms linear infinite;
 }

 @-webkit-keyframes container-rotate {
   to {
     -webkit-transform: rotate(360deg)
   }
 }

 @keyframes container-rotate {
   to {
     transform: rotate(360deg)
   }
 }

 .spinner-layer {
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0;
   white-space: nowrap;
   border-color: white;
 }

 .layer-1 {
   border-color: white;
 }

 .layer-2 {
   border-color: white;
 }

 .layer-3 {
   border-color: white;
 }

 .layer-4 {
   border-color: white;
 }

 /**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
 * seems).
 */

 .active .spinner-layer {
   -webkit-animation-name: fill-unfill-rotate;
   -webkit-animation-duration: 5332ms;
   -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
   -webkit-animation-iteration-count: infinite;
   animation-name: fill-unfill-rotate;
   animation-duration: 5332ms;
   animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
   animation-iteration-count: infinite;
   opacity: 1;
 }

 .active .spinner-layer.layer-1 {
   -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
   animation-name: fill-unfill-rotate, layer-1-fade-in-out;
 }

 .active .spinner-layer.layer-2 {
   -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
   animation-name: fill-unfill-rotate, layer-2-fade-in-out;
 }

 .active .spinner-layer.layer-3 {
   -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
   animation-name: fill-unfill-rotate, layer-3-fade-in-out;
 }

 .active .spinner-layer.layer-4 {
   -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
   animation-name: fill-unfill-rotate, layer-4-fade-in-out;
 }

 @-webkit-keyframes fill-unfill-rotate {
   12.5% {
     -webkit-transform: rotate(135deg)
   }
   /* 0.5 * ARCSIZE */
   25% {
     -webkit-transform: rotate(270deg)
   }
   /* 1   * ARCSIZE */
   37.5% {
     -webkit-transform: rotate(405deg)
   }
   /* 1.5 * ARCSIZE */
   50% {
     -webkit-transform: rotate(540deg)
   }
   /* 2   * ARCSIZE */
   62.5% {
     -webkit-transform: rotate(675deg)
   }
   /* 2.5 * ARCSIZE */
   75% {
     -webkit-transform: rotate(810deg)
   }
   /* 3   * ARCSIZE */
   87.5% {
     -webkit-transform: rotate(945deg)
   }
   /* 3.5 * ARCSIZE */
   to {
     -webkit-transform: rotate(1080deg)
   }
   /* 4   * ARCSIZE */
 }

 @keyframes fill-unfill-rotate {
   12.5% {
     transform: rotate(135deg)
   }
   /* 0.5 * ARCSIZE */
   25% {
     transform: rotate(270deg)
   }
   /* 1   * ARCSIZE */
   37.5% {
     transform: rotate(405deg)
   }
   /* 1.5 * ARCSIZE */
   50% {
     transform: rotate(540deg)
   }
   /* 2   * ARCSIZE */
   62.5% {
     transform: rotate(675deg)
   }
   /* 2.5 * ARCSIZE */
   75% {
     transform: rotate(810deg)
   }
   /* 3   * ARCSIZE */
   87.5% {
     transform: rotate(945deg)
   }
   /* 3.5 * ARCSIZE */
   to {
     transform: rotate(1080deg)
   }
   /* 4   * ARCSIZE */
 }

 @-webkit-keyframes layer-1-fade-in-out {
   0% {
     opacity: 1
   }
   25% {
     opacity: 1
   }
   26% {
     opacity: 0
   }
   89% {
     opacity: 0
   }
   90% {
     opacity: 1
   }
   to {
     opacity: 1
   }
 }

 @keyframes layer-1-fade-in-out {
   0% {
     opacity: 1
   }
   25% {
     opacity: 1
   }
   26% {
     opacity: 0
   }
   89% {
     opacity: 0
   }
   90% {
     opacity: 1
   }
   to {
     opacity: 1
   }
 }

 @-webkit-keyframes layer-2-fade-in-out {
   0% {
     opacity: 0
   }
   15% {
     opacity: 0
   }
   25% {
     opacity: 1
   }
   50% {
     opacity: 1
   }
   51% {
     opacity: 0
   }
   to {
     opacity: 0
   }
 }

 @keyframes layer-2-fade-in-out {
   0% {
     opacity: 0
   }
   15% {
     opacity: 0
   }
   25% {
     opacity: 1
   }
   50% {
     opacity: 1
   }
   51% {
     opacity: 0
   }
   to {
     opacity: 0
   }
 }

 @-webkit-keyframes layer-3-fade-in-out {
   0% {
     opacity: 0
   }
   40% {
     opacity: 0
   }
   50% {
     opacity: 1
   }
   75% {
     opacity: 1
   }
   76% {
     opacity: 0
   }
   to {
     opacity: 0
   }
 }

 @keyframes layer-3-fade-in-out {
   0% {
     opacity: 0
   }
   40% {
     opacity: 0
   }
   50% {
     opacity: 1
   }
   75% {
     opacity: 1
   }
   76% {
     opacity: 0
   }
   to {
     opacity: 0
   }
 }

 @-webkit-keyframes layer-4-fade-in-out {
   0% {
     opacity: 0
   }
   65% {
     opacity: 0
   }
   75% {
     opacity: 1
   }
   90% {
     opacity: 1
   }
   to {
     opacity: 0
   }
 }

 @keyframes layer-4-fade-in-out {
   0% {
     opacity: 0
   }
   65% {
     opacity: 0
   }
   75% {
     opacity: 1
   }
   90% {
     opacity: 1
   }
   to {
     opacity: 0
   }
 }

 .circle-clipper {
   display: inline-block;
   position: relative;
   width: 50%;
   height: 100%;
   overflow: hidden;
   border-color: inherit;
 }

 /**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
 */

 .spinner-layer::after {
   left: 45%;
   width: 10%;
   border-top-style: solid;
 }

 .spinner-layer::after,
 .circle-clipper::after {
   content: '';
   box-sizing: border-box;
   position: absolute;
   top: 0;
   border-width: 2px;
   border-color: inherit;
   border-radius: 50%;
 }

 .circle-clipper::after {
   bottom: 0;
   width: 200%;
   border-style: solid;
   border-bottom-color: transparent !important;
 }

 .circle-clipper.left::after {
   left: 0;
   border-right-color: transparent !important;
   -webkit-transform: rotate(129deg);
   transform: rotate(129deg);
 }

 .circle-clipper.right::after {
   left: -100%;
   border-left-color: transparent !important;
   -webkit-transform: rotate(-129deg);
   transform: rotate(-129deg);
 }

 .active .gap-patch::after,
 .active .circle-clipper::after {
   -webkit-animation-duration: 1333ms;
   -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
   -webkit-animation-iteration-count: infinite;
   animation-duration: 1333ms;
   animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
   animation-iteration-count: infinite;
 }

 .active .circle-clipper.left::after {
   -webkit-animation-name: left-spin;
   animation-name: left-spin;
 }

 .active .circle-clipper.right::after {
   -webkit-animation-name: right-spin;
   animation-name: right-spin;
 }

 @-webkit-keyframes left-spin {
   0% {
     -webkit-transform: rotate(130deg)
   }
   50% {
     -webkit-transform: rotate(-5deg)
   }
   to {
     -webkit-transform: rotate(130deg)
   }
 }

 @keyframes left-spin {
   0% {
     transform: rotate(130deg)
   }
   50% {
     transform: rotate(-5deg)
   }
   to {
     transform: rotate(130deg)
   }
 }

 @-webkit-keyframes right-spin {
   0% {
     -webkit-transform: rotate(-130deg)
   }
   50% {
     -webkit-transform: rotate(5deg)
   }
   to {
     -webkit-transform: rotate(-130deg)
   }
 }

 @keyframes right-spin {
   0% {
     transform: rotate(-130deg)
   }
   50% {
     transform: rotate(5deg)
   }
   to {
     transform: rotate(-130deg)
   }
 }

 .spinner.cooldown {
   -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
   animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }

 @-webkit-keyframes fade-out {
   0% {
     opacity: 1
   }
   to {
     opacity: 0
   }
 }

 @keyframes fade-out {
   0% {
     opacity: 1
   }
   to {
     opacity: 0
   }
 }

 .spinner {
   display: inline-block;
   position: relative;
   width: 28px;
   height: 28px;
   /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
   /*--paper-spinner-container-rotation-duration: 1568ms;*/
   /* ARCTIME */
   /*--paper-spinner-expand-contract-duration: 1333ms;*/
   /* 4 * ARCTIME */
   /*--paper-spinner-full-cycle-duration: 5332ms;*/
   /* SHRINK_TIME */
   /*--paper-spinner-cooldown-duration: 400ms;*/
 }

 .spinner .left {
   float: left;
 }

 .spinner .right {
   float: right;
 }

 .spinner.active {
   -webkit-animation: container-rotate 1568ms linear infinite;
   animation: container-rotate 1568ms linear infinite;
 }

 @-webkit-keyframes container-rotate {
   to {
     -webkit-transform: rotate(360deg)
   }
 }

 @keyframes container-rotate {
   to {
     transform: rotate(360deg)
   }
 }

 .spinner-layer {
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0;
   white-space: nowrap;
   border-color: white;
 }

 .layer-1 {
   border-color: white;
 }

 .layer-2 {
   border-color: white;
 }

 .layer-3 {
   border-color: white;
 }

 .layer-4 {
   border-color: white;
 }

 /**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
 * seems).
 */

 .active .spinner-layer {
   -webkit-animation-name: fill-unfill-rotate;
   -webkit-animation-duration: 5332ms;
   -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
   -webkit-animation-iteration-count: infinite;
   animation-name: fill-unfill-rotate;
   animation-duration: 5332ms;
   animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
   animation-iteration-count: infinite;
   opacity: 1;
 }

 .active .spinner-layer.layer-1 {
   -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
   animation-name: fill-unfill-rotate, layer-1-fade-in-out;
 }

 .active .spinner-layer.layer-2 {
   -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
   animation-name: fill-unfill-rotate, layer-2-fade-in-out;
 }

 .active .spinner-layer.layer-3 {
   -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
   animation-name: fill-unfill-rotate, layer-3-fade-in-out;
 }

 .active .spinner-layer.layer-4 {
   -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
   animation-name: fill-unfill-rotate, layer-4-fade-in-out;
 }

 @-webkit-keyframes fill-unfill-rotate {
   12.5% {
     -webkit-transform: rotate(135deg)
   }
   /* 0.5 * ARCSIZE */
   25% {
     -webkit-transform: rotate(270deg)
   }
   /* 1   * ARCSIZE */
   37.5% {
     -webkit-transform: rotate(405deg)
   }
   /* 1.5 * ARCSIZE */
   50% {
     -webkit-transform: rotate(540deg)
   }
   /* 2   * ARCSIZE */
   62.5% {
     -webkit-transform: rotate(675deg)
   }
   /* 2.5 * ARCSIZE */
   75% {
     -webkit-transform: rotate(810deg)
   }
   /* 3   * ARCSIZE */
   87.5% {
     -webkit-transform: rotate(945deg)
   }
   /* 3.5 * ARCSIZE */
   to {
     -webkit-transform: rotate(1080deg)
   }
   /* 4   * ARCSIZE */
 }

 @keyframes fill-unfill-rotate {
   12.5% {
     transform: rotate(135deg)
   }
   /* 0.5 * ARCSIZE */
   25% {
     transform: rotate(270deg)
   }
   /* 1   * ARCSIZE */
   37.5% {
     transform: rotate(405deg)
   }
   /* 1.5 * ARCSIZE */
   50% {
     transform: rotate(540deg)
   }
   /* 2   * ARCSIZE */
   62.5% {
     transform: rotate(675deg)
   }
   /* 2.5 * ARCSIZE */
   75% {
     transform: rotate(810deg)
   }
   /* 3   * ARCSIZE */
   87.5% {
     transform: rotate(945deg)
   }
   /* 3.5 * ARCSIZE */
   to {
     transform: rotate(1080deg)
   }
   /* 4   * ARCSIZE */
 }

 @-webkit-keyframes layer-1-fade-in-out {
   0% {
     opacity: 1
   }
   25% {
     opacity: 1
   }
   26% {
     opacity: 0
   }
   89% {
     opacity: 0
   }
   90% {
     opacity: 1
   }
   to {
     opacity: 1
   }
 }

 @keyframes layer-1-fade-in-out {
   0% {
     opacity: 1
   }
   25% {
     opacity: 1
   }
   26% {
     opacity: 0
   }
   89% {
     opacity: 0
   }
   90% {
     opacity: 1
   }
   to {
     opacity: 1
   }
 }

 @-webkit-keyframes layer-2-fade-in-out {
   0% {
     opacity: 0
   }
   15% {
     opacity: 0
   }
   25% {
     opacity: 1
   }
   50% {
     opacity: 1
   }
   51% {
     opacity: 0
   }
   to {
     opacity: 0
   }
 }

 @keyframes layer-2-fade-in-out {
   0% {
     opacity: 0
   }
   15% {
     opacity: 0
   }
   25% {
     opacity: 1
   }
   50% {
     opacity: 1
   }
   51% {
     opacity: 0
   }
   to {
     opacity: 0
   }
 }

 @-webkit-keyframes layer-3-fade-in-out {
   0% {
     opacity: 0
   }
   40% {
     opacity: 0
   }
   50% {
     opacity: 1
   }
   75% {
     opacity: 1
   }
   76% {
     opacity: 0
   }
   to {
     opacity: 0
   }
 }

 @keyframes layer-3-fade-in-out {
   0% {
     opacity: 0
   }
   40% {
     opacity: 0
   }
   50% {
     opacity: 1
   }
   75% {
     opacity: 1
   }
   76% {
     opacity: 0
   }
   to {
     opacity: 0
   }
 }

 @-webkit-keyframes layer-4-fade-in-out {
   0% {
     opacity: 0
   }
   65% {
     opacity: 0
   }
   75% {
     opacity: 1
   }
   90% {
     opacity: 1
   }
   to {
     opacity: 0
   }
 }

 @keyframes layer-4-fade-in-out {
   0% {
     opacity: 0
   }
   65% {
     opacity: 0
   }
   75% {
     opacity: 1
   }
   90% {
     opacity: 1
   }
   to {
     opacity: 0
   }
 }

 .circle-clipper {
   display: inline-block;
   position: relative;
   width: 50%;
   height: 100%;
   overflow: hidden;
   border-color: inherit;
 }

 /**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
 */

 .spinner-layer::after {
   left: 45%;
   width: 10%;
   border-top-style: solid;
 }

 .spinner-layer::after,
 .circle-clipper::after {
   content: '';
   box-sizing: border-box;
   position: absolute;
   top: 0;
   border-width: 2px;
   border-color: inherit;
   border-radius: 50%;
 }

 .circle-clipper::after {
   bottom: 0;
   width: 200%;
   border-style: solid;
   border-bottom-color: transparent !important;
 }

 .circle-clipper.left::after {
   left: 0;
   border-right-color: transparent !important;
   -webkit-transform: rotate(129deg);
   transform: rotate(129deg);
 }

 .circle-clipper.right::after {
   left: -100%;
   border-left-color: transparent !important;
   -webkit-transform: rotate(-129deg);
   transform: rotate(-129deg);
 }

 .active .gap-patch::after,
 .active .circle-clipper::after {
   -webkit-animation-duration: 1333ms;
   -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
   -webkit-animation-iteration-count: infinite;
   animation-duration: 1333ms;
   animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
   animation-iteration-count: infinite;
 }

 .active .circle-clipper.left::after {
   -webkit-animation-name: left-spin;
   animation-name: left-spin;
 }

 .active .circle-clipper.right::after {
   -webkit-animation-name: right-spin;
   animation-name: right-spin;
 }

 @-webkit-keyframes left-spin {
   0% {
     -webkit-transform: rotate(130deg)
   }
   50% {
     -webkit-transform: rotate(-5deg)
   }
   to {
     -webkit-transform: rotate(130deg)
   }
 }

 @keyframes left-spin {
   0% {
     transform: rotate(130deg)
   }
   50% {
     transform: rotate(-5deg)
   }
   to {
     transform: rotate(130deg)
   }
 }

 @-webkit-keyframes right-spin {
   0% {
     -webkit-transform: rotate(-130deg)
   }
   50% {
     -webkit-transform: rotate(5deg)
   }
   to {
     -webkit-transform: rotate(-130deg)
   }
 }

 @keyframes right-spin {
   0% {
     transform: rotate(-130deg)
   }
   50% {
     transform: rotate(5deg)
   }
   to {
     transform: rotate(-130deg)
   }
 }

 .spinner.cooldown {
   -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
   animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }

 @-webkit-keyframes fade-out {
   0% {
     opacity: 1
   }
   to {
     opacity: 0
   }
 }

 @keyframes fade-out {
   0% {
     opacity: 1
   }
   to {
     opacity: 0
   }
 }

 .loading-container {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.1);
 }

 .circle-middle {
   position: absolute;
   top: 40%;
   left: 50%;
   margin-left: 14px;
 }

 .end-exam {
   padding-top: 100px;
   font-size: 30px;
   height: 40px;
   line-height: 40px;
   text-align: center;
 }

 .text_field:focus {
   outline: none;
 }

 .margin-top-30 {
   margin-top: 30px;
 }

 .result-container {
   height: 100px;
   line-height: 100px;
   text-align: center;
   font-size: 40px;
   color: white;
   margin-top: 50px;
 }

 .result-container-1 {
   height: 100px;
   line-height: 100px;
   text-align: center;
   font-size: 40px;
   color: white;
 }

.question-answers{
  height: 400px;
  position: relative;
}
.question-answers img{
  width: 140px;
  cursor: pointer;
  position: absolute;
}

.question-answers div:hover{
  background: #4ba3c7;
}

.special-image{
  width: 110px !important;
}

.man-body{
  width: 70px !important;
  z-index: 1;
  pointer-events: none;
}


.A-position{
  left: 300px !important;
  top: 30px !important;
  transition: all 1s;
}


.B-position{
  left: 500px !important;
  top: 50px !important;
  transition: all 1s;
}


.C-position{
  left: 300px !important;
  top: 250px !important;
  transition: all 1s;
}


.D-position{
  left: 550px !important;
  top: 200px !important;
  transition: all 1s;
}

.A-position-move{
  left: 320px !important;
  top: 10px !important;
  transition: all 1s;
}


.B-position-move{
  left: 537px !important;
  top: 50px !important;
  transition: all 1s;
}


.C-position-move{
  left: 336px !important;
  top: 229px !important;
  transition: all 1s;
}


.D-position-move{
  left: 584px !important;
    top: 180px !important;
  transition: all 1s;
}
.man-position{
  left: 48px;
  top: 160px;
  transition: all 1s;
}

.first-position{
  left: 10px;
  top: 180px;
  cursor: default !important;
}

.show-content{
  opacity: 1;
  transition: all 1s;
}

.hide-content{
  opacity: 0;
  transition: all 1s;
}

.save-exit{
  position: absolute;
  color: white;
  right: 46px;
  top: 20px;
  font-size: 18px;
  cursor: pointer;
}